<template>
	<view>
		<view class="face" >
			<button open-type="chooseAvatar" @chooseavatar="onChooseAvatar" plain="true">
				<image class="user_face" :src="userInfo.avatar" mode="widthFix"></image>
			</button>
		</view>
		<view class="user_nick_box">
			<view style="margin-left: 22rpx;">您的昵称：</view>
			<view><input class="uni-input" type="nickname"  name="nickname" v-model="user_nickname" @change="getNickname" placeholder="请复制输入昵称"/></view>
		</view>
		<view>
			<view class="sub_button">
				 <u-button text="提交保存" color="#6eb1f6"  @click="postInfoFunc()" shape='square' :loading="is_loading" size='large'></u-button>
			</view>
		</view>
	</view>
  
</template>

<script>
	import {
		get_user_info,
	    set_user_info
	} from '@/api/my.js'
	import baseUrl from '@/utils/siteInfo.js';
	export default {
		data() {
			return {
				apiUrl:baseUrl.apiroot+"/common/upload",
				userInfo:'',
				user_nickname:'',
				is_loading:false,
				user_face:'',
			}
		},
		onShow() {
			this.getUserInfo();
		},
		methods: {
			getUserInfo(){
				uni.showLoading();
				get_user_info().then(res => {
					uni.hideLoading();
					if (res.code == 0) {
						this.userInfo = res.data;
						this.user_face = res.data.avatar;
						this.user_nickname = res.data.nickname;
					}else{
						uni.showToast({
							title: res.msg,
							icon: 'none'
						});
						var that = this
						setTimeout(function(){
							uni.navigateTo({
								url: '/pages/my/login/index?type=password'
							})
						},1500)
					}
				}).catch(err => {})
			},
			onChooseAvatar(e){
				const { avatarUrl } = e.detail;
        uni.showLoading();

				var that = this;
				const header = {
					// 'X-Form-Id-List': JSON.stringify(popAll()),
					'X-Form-Id-List': [],

					'X-Requested-With': 'XMLHttpRequest',
					'content-type': 'multipart/form-data',
				};
				let accessToken = uni.getStorageSync('_USER_ACCESS_TOKEN');
				if (accessToken) {
					header['authorization'] = 'Bearer ' + accessToken;
				}
				console.log(that.apiUrl);
				console.log(avatarUrl);
				uni.uploadFile({
						url: that.apiUrl,
						filePath: avatarUrl,
						fileType: 'image',
						name: 'file',
						formData: {
							'filename': 'file',
							'path':'face'
						},
						header: header,
						success: (res) => {

							console.log('结果',res.data);
							uni.hideLoading();
							if(res.statusCode != 200){
								uni.showToast({
									title: res.errMsg,
									duration: 2000,
									icon: 'error'
								});
								return '';
							}

							var reDataJson = res.data;
							var reData = JSON.parse(reDataJson);
							console.log('结果==',reData);
							if (reData.code == 0) {
								that.userInfo.avatar = reData.data.fullurl;
								that.user_face = reData.data.url;

							}else {
								uni.showToast({
									title: reData.msg,
									duration: 2000,
									icon: 'error'
								});
								return '';
							}
						},
						fail: (err) => {
							uni.hideLoading();
							uni.showToast({
								title: '出错了，请重试',
								duration: 2000,
								icon: 'error'
							});
							return '';
						}
					})
			},
			getNickname(e){
				this.user_nickname = e.detail.value;
			},
			postInfoFunc(){
				var params = {nickname:this.user_nickname,avatar:this.user_face};
				if(this.user_nickname == ''){
					uni.showToast({
						title: '请输入昵称',
						icon: 'none',
						duration: 2000,
					})
					return '';
				}
				//信息存储到服务器
				set_user_info(params).then(res=>{
					if(res.code == 0){
						uni.showToast({
							title: '同步成功',
							duration: 2000,
							icon: 'success'
						});
						setTimeout(function(){
							uni.switchTab({
								url:"/pages/my/index"
							})
						},2000)
					}else{
						uni.showToast({
							title: res.msg,
							duration: 2000,
							icon: none
						});
					}


				})
			}
		}
	}
</script>

<style>
.face{
	margin-top: 80rpx;
	margin-bottom: 50rpx;
}
.user_face{
	width: 220rpx;
	margin: auto;
	border-radius: 50%;
}
.user_nick_box{
	padding: 20rpx;
	border-top: solid 2rpx #e3e3e3;
	border-bottom: solid 2rpx #e3e3e3;
	height: 92rpx;
	display: flex;
	font-size: 30rpx;
	color: #000;
	align-items: center;
}
.sub_button{
	width: 84%;
	margin-left: 8%;
	margin-top: 140rpx;
}
button[plain]{
	border:0;
}
</style>
